// USER VARIABLES SECTION

$dull-orange: rgb(204, 153, 51)
$black: rgb(51, 51, 51)
$warm-grey: rgb(153, 153, 153)
$brownish-grey: rgb(102, 102, 102)
$white-color: rgb(255, 255, 255)
$backgound: rgb(241, 241, 241)
$line-color: rgb(204, 204, 204)
$sand: rgb(233, 206, 147)
$star-grey: rgb(230, 230, 230)
$tour-block: rgb(233, 233, 233)
$tour-border: rgb(225, 225, 225)

$fontsize: 16px
// Body Font Size
$system: -apple-system, BlinkMacSystemFont, Arial, sans-serif
// System Font Family
$muller: "Muller"

// Bootstrap compatible gutter variable => $gutter
$grid-gutter-width: 20px
$gutter: $grid-gutter-width

// IMPORT SECTION

@import 'node_modules/bootstrap/scss/bootstrap-reboot.scss'
// Bootstrap Reboot collection
@import 'node_modules/bootstrap/scss/mixins/_breakpoints.scss'
// Bootstrap Breakpoints mixin
// @import 'node_modules/bootstrap/scss/bootstrap-grid.scss' // Optional Bootstrap Grid
// @import 'node_modules/bootstrap/scss/utilities/_sizing.scss' // Optional Bootstrap Utilites

// FONTS LOAD SECTION

@mixin font($fname, $fstyle, $fweight, $furl)
  @font-face
    font-family: $fname
    font-style: $fstyle
    font-weight: $fweight
    // font-display: swap // Uncomment to initially display system fonts
    src: local($fname), url($furl) format('woff2')

@include font('Muller', normal, 300, '../fonts/MullerLight.woff2')
@include font('Muller', normal, 400, '../fonts/MullerRegular.woff')
@include font('Muller', normal, 500, '../fonts/MullerMedium.woff2')
@include font('Muller', normal, 700, '../fonts/MullerBold.woff2')
@include font('icomoon', normal, 400, '../fonts/icomoon.woff')
@include font('icomoon_arrow', normal, 400, '../fonts/icomoon_arrow.woff')

// GENERAL DOCUMENT STYLES

*
  box-sizing: border-box

::placeholder
  color: #666

::selection
  background-color: $dull-orange
  color: #fff

input, textarea
  outline: none
  &:focus:required:invalid
    border-color: red
  &:required:valid
    border-color: green

body
  /* Позиционирование */
  position: relative
  /* Блочная модель */
  min-width: 375px
  /* Типографика */
  font-family: $muller
  font-size: $fontsize
  line-height: 1.65
  /* Оформление */
  background-color: $backgound
  overflow-x: hidden
  /* Анимации */
  ul
    /* Позиционирование */
    /* Блочная модель */
    margin: 0
    padding: 0
    /* Типографика */
    list-style: none
    /* Оформление */
    /* Анимации */

section:not(:last-child)
  /* Позиционирование */
  /* Блочная модель */
  margin-bottom: 70px
  /* Типографика */
  /* Оформление */
  /* Анимации */

.container
  /* Позиционирование */
  /* Блочная модель */
  max-width: 1168px
  margin-left: auto
  margin-right: auto
  /* Типографика */
  /* Оформление */
  /* Анимации */

.h2
  /* Позиционирование */
  /* Блочная модель */
  margin-bottom: 25px
  margin-left: 44px
  /* Типографика */
  font-size: 2.5rem
  line-height: 32px
  color: $black
  /* Оформление */
  /* Анимации */

hr
  margin-right: 57px
  color: black
